<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css盒模型</title>
	<style type="text/css">
		html *{
			margin: 0;
			padding:0;
		}
	</style>
</head>
<body>
	<section id="sec">
		<style type="text/css">
			#sec{
				background-color:  red;
				overflow: hidden;			
			}
			#sec .chlid{
				margin-top: 50px;
				height:100px;
				background-color: yellow;
			}
		</style>
		<article class="chlid">
		</article>
	</section>

	<!-- bfc垂直方向边距重叠 -->
	<section id="margin">
		<style type="text/css">
			#margin{
				background-color: pink;
				overflow: hidden;
			}
			#margin p{
				background-color:red;
				font-size:30px;
				margin: 5px auto 20px;
			}
		</style>
		<p>1</p>
		<div style="overflow: hidden;">
			<p>2</p>
		</div>
		<p>3</p>
	</section>

	<!-- bfc布局 -->
	<section id="layout">
		<style type="text/css">
			#layout{
				background-color: red;
				/*overflow: hidden;*/
			}
			#layout .left{
				width: 100px;
				height:100px;
				background-color: pink;
				float:left;
			}
			#layout .right{
				height:150px;
				/*float: left;*/
				background-color: #ccc;
				overflow: auto;
			}
		</style>
		<div class="left"></div>
		<div class="right">1231</div>
	</section>

	<!-- bfc清除浮动 -->
	<section id="float">
		<style type="text/css">
			#float{
				background-color: yellow;
				overflow: auto;
				float:left;
			}
			#float div{
				float: left;
				/*background-color: red;*/
				font-size: 50px;
			}	
		</style>
		<div>我是浮动元素</div>
	</section>
</body>
</html>